【WordPress】W3 Total CacheプラグインでアップロードファイルをCDN（CloudFront）経由で配信する＋キャッシュ

Webサイト高速化テクニック

#WordPress

#CDN

#Amazon S3

#Amazon CloudFront

#AWS IAM

野中龍一

2013.07.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

WordPressの静的ファイルをCDNを使って配信したい時ってありますよね。
WebサーバーのCPUパワーを静的ファイルの配信に使うのはコストパフォーマンスが悪いですし、サイトの表示速度を考えるとCDNを使って外だしするのがベストです。

実現する方法としていくつかのプラグインやCDNサービスが選択肢にあがります。
今回、その1つの方法としてCDN「Amazon CloudFront」をWordpress上で使う設定手順を紹介したいと思います。

翻訳内容や解説は伝わりやすいよう改変していますが、分かり難いところがあればコメントいただけると助かります。

1，今回利用するツール＆サービス

この記事に興味を持った方は、WordPressについてすでに知っている方が多いと思うので割愛します。

WordPress
W3 Total Cache
AWS（Amazon Web Services）
- AWS Identity and Access Management（IAM）
- Amazon S3
- Amazon CloudFront

その他のツールについて、簡単に触れておきます。

1.1，W3 Total Cacheとは？

Easy Web Performance Optimization (WPO) using caching: browser, page, object, database, minify and content delivery network support.

簡単に解説すると、総合的なキャッシュ機能（ブラウザの機能を使ったキャッシュ、ページ単位の静的キャッシュ、オブジェクトキャッシュ、データベースキャッシュ）、CSSやJS,HTMLなどの圧縮、CDNとの連携をトータルで提供する超高機能なプラグインです。

W3 Total Cache

1.2，AWS（Amazon Web Services）とは？

アマゾンウェブサービスのインフラとアプリケーションサービスを利用すると、エンタープライズアプリケーションやビッグデータのプロジェクトから、ソーシャルゲームやモバイルアプリに至るまで、ほぼあらゆるものをクラウドで実行できます。
クラウドコンピューティングの主なメリットの 1 つは、先行投資となるインフラコストを、お客様のビジネス拡大にあわせた低額の変動費に移行できることです。 AWS

1.3，AWS Identity and Access Management（IAM）とは？

AWS Identity and Access Management (IAM) により、お客様のユーザーの AWS サービスおよびリソースへのアクセスを安全にコントロールすることができます。IAM を使用すると、AWS のユーザーとグループを作成および管理し、権限を使用して AWS リソースへのアクセスを許可および拒否できます。 AWS Identity and Access Management

1.4，Amazon Simple Storage Service（Amazon S3）とは？

Amazon S3 ならシンプルなウェブサービス・インターフェイスをご提供できます。いつでも、ウェブ上のどこからでも容量に関係なくデータを格納・取得できるのです。これによって、開発者は拡張可能で信頼性が高く、安全で、高速でありながら安価なインフラストラクチャを利用することが可能になります。このシステムは、Amazon が使用しているウェブサイトのグローバルネットワークと同じものです。このサービスの目的は規模のメリットを最大化で開発者に提供することです。 Amazon Simple Storage Service

1.5，Amazon CloudFrontとは？

Amazon CloudFront は、エッジロケーションのグローバルなネットワークを利用して、静的コンテンツやストリーミングコンテンツを含め、ウェブサイト全体を配信できます。コンテンツリクエストは、自動的に最寄りのエッジロケーションにルーティングされるため、可能な限り高パフォーマンスでコンテンツが配信されます。 Amazon CloudFront

2，W3 Total Cacheの機能

この記事ではW3 Total CacheのCDN連携について具体的に解説いたします。
その他の機能も簡単には紹介しておきますが具体的な設定方法は省略します。主な機能は大きく6つに分かれます。

ページキャッシュ（Page Cache）
データベースキャッシュ（Database Cache）
オブジェクトキャッシュ（Object Cache）
ブラウザーキャッシュ（Browser Cache）
圧縮（Minify）
コンテンツ・デリバリー・ネットワーク（CDN）

これらの機能をもう少し詳しく見ていきましょう。

2.1，ページキャッシュ（Page Cache）

ページキャッシュはPHPで処理された後のHTMLやRSSをキャッシュします。この機能をオンにすることで大きなパフォーマンス改善が期待できます。
以下が主なキャッシュ対象のページと設定項目です。

静的生成されるすべてのページ
すべてのRSS
SSLリクエストされたページ
検索結果などの動的ページ
404エラーページ
リファラーによる制御
ログインしているユーザーに対するキャッシュ制御
ユーザーロールに対するキャッシュ制御

キャッシュのリロード時間は設定とキャッシュパージポリシーの設定により制御できます。
特に理由がない場合はデフォルトの設定で十分でしょう。

また、より細かなアドバンスド設定によりクッキーやUA、ファイル単位のキャッシュ制御ができます。サービスの用途に応じて細かく制御できます。

2.2，データベースキャッシュ（Database Cache）

DBクエリをキャッシュします。
テーマ内で行われている動的処理によってはキャッシュを回避するためにアドバンスドセッティングによる調整が必要です。

オブジェクトキャッシュ（Object Cache）

PHPで処理されるオブジェクトをメモリまたはディスクにキャッシュします。
こちらもテーマ内で行われている動的処理によってはキャッシュを回避するためにアドバンスドセッティングによる調整が必要となります。

2.3，ブラウザーキャッシュ（Browser Cache）

ブラウザ側のキャッシュを有効活用するための機能です。
以下のような機能が用意されています。

Last-Modified headerの付加
Expires headerの付加
Cache control header の付加
ETag headerの付加
W3 Total Cache headerの付加
gzipの利用

これらの指定はHTML&XML,CSS,JS、その他メディア毎に制御することができます。

ただし、Apacheの設定からも制御できるためパフォーマンスを考えると、できればhttpd.conf側で制御することが望ましいです。

2.4，圧縮（Minify）

テーマ側で一々CSSやJSの圧縮せずにWordpressに任せ自動化できます。
主な機能は以下の通りです。

HTML、XMLのMinify
- 小さなJSをHTMLにインラインで埋め込む
- 小さなCSSをHTMLにインラインで埋め込む
- 改行の削除
JSのMinifyとCombine、改行・コメントの削除
CSSのMinifyとCombine、改行・コメントの削除

これらの機能はできればテーマ側で事前にチューニングしておくことがベストです。

コンテンツ・デリバリー・ネットワーク（CDN）

これが本記事で解説する機能です。この機能を使うことで静的ファイルをCDNから配信できるようになります。
主にこれらの機能が用意されています。

テーマのJSやCSS、画像などの静的ファイルをS3→CloudFront経由で配信
wp-include内のJSやCSS、画像などの静的ファイルをS3→CloudFront経由で配信
画像などのアップロードファイルをS3→CloudFront経由で配信

この機能を使いCloudFront+S3と連携する場合、AWSの"Access key"と "Secret key"が必要になります。

AWSのアカウント登録にはクレジットカードの登録と、従量課金制となるのでご注意ください。

2.5，W3 Total Cacheの注意点

これだけ高機能で自動化できるということは、サーバー側にも大きな負担がかかります。
HTTPサーバーがApacheの場合、メモリが512MBと少ない場合ではおそらく厳しいでしょう。最低1GB以上が好ましいと思います。（利用する機能を制限したり、事前のパフォーマンスチューニングによっては可能な場合もあります）。

また、過去にセキュリティ的な問題があったこともあるので、できるだけ最新版を使い、W3 Total Cacheのセキュリティ関連情報は常にチェックしておきましょう。

3，Amazon CloudFront+S3の利用について

まずはAmazon CloudFrontを使うためにAWS（Amazon Web Services）のアカウントが必要です。
少し古いですが、こちらの記事「Amazon Web Servicesのアカウント作成」を参考にアカウントを作りましょう。

3.1，アクセスキーとシークレットキーの取得

アカウントの作成が完了したら、アクセスキーとシークレットキーを発行しましょう。
まずはAWSにログインし、次のページアカウント・アクティビティ（Account Activity）にアクセスしてください。

アカウント・アクティビティのメニューにあるセキュリティ証明書のページにアクセスします。
管理画面のアップデートに伴い、AWS Identity and Access Management (IAM)によるセキュリティ証明書の管理が推薦されています。
今回はIAMを使ったセキュリティ証明書の発行について解説します。

過去にアカウントを作成し、セキュリティ証明書を発行している場合は過去のものを利用できますが、セキュリティ的にIAMに移行するのが良いでしょう。

3.2，IAM Userの作成

はずは、IAMにアクセスしましょう。

IAM Home

続いてUserページに移動します。
Create New Userをクリックしてユーザーを作りましょう。

Userページに移動

Create New User

ウィンドウが表示されるので作成するアカウント名を入力します。入力が完了したらCreateボタンを押します。

ユーザー名を入力

ユーザーの作成が完了しました。
Show User Security Credentialsでアクセスキーとシークレットキーの確認、Download CredentialsでCSVファイルをダウンロードすることができます。ダウンロードしておかないと再発行する羽目になるのでしっかりとダウンロードしておきましょう。

ユーザー作成完了